<style scoped>
  .chart {
    width: 100%;
    float: left;
  }

  /*.chart div {
      height: 400px;
      float: left;
  }*/

  .Col {
    padding: 30px 20px;
  }

  .blist {
    /*background-color: #d1e4e8;*/
    /*height: 200px;*/
    cursor: pointer;
    color: #6eceac;

  }

  .userlist {
    padding-left: 30%;
    float: right;
    color: #6eceac;
  }

  .ecard {
    height: 300px;
    margin-bottom: 10px;
    /*margin-right: 10px;*/
  }

  .hcard {
    height: 610px;
    margin-left: 20px;
  }

  .p-img {
    width: 100%;
    /*height: 60px;*/
    line-height: 60px;
    float: right;
    margin-top: -50px;
  }

  .p-img img {
    border-radius: 20px;
    /*margin: 10px 0px 10px 10px;*/
    width: 20px;
    height: 20px;
    float: right;
  }
</style>
<template>
  <div class="layout-content-body">
    <Row style="background:#eee;padding:20px;">
      <Col :span="12">
      <Card class="ecard">
        <p slot="title">
          {{userprof.Title}}
        </p>
        <span class="p-img">
                            <img :src="imgUrl">
                        </span>
        <ul>
          <li>姓名:
            <span class="userlist">{{userprof.Title}}</span>
          </li>
          <li>账号:
            <span class="userlist">{{userInfo.Name}}</span>
          </li>
          <li>角色:
            <span class="userlist">{{role.Name}}</span>
          </li>
          <li>单位:
            <span class="userlist">{{org.Name}}</span>
          </li>
          <li>部门:
            <span class="userlist">{{dept.Name}}</span>
          </li>
          <li>职业:
            <span class="userlist">{{userprof.Expert}}</span>
          </li>
          <li>岗位:
            <span class="userlist">{{userprof.Job}}</span>
          </li>
          <li>电话:
            <span class="userlist">{{userprof.Phone}}</span>
          </li>
          <li>邮件:
            <span class="userlist">{{userprof.Email}}</span>
          </li>
          <li>上次活动时间:
            <span class="userlist">{{userprof.Logintime}}</span>
          </li>
          <li>上次活动ip:
            <span class="userlist">{{userprof.Loginip}}</span>
          </li>
        </ul>
      </Card>
      <Card class="ecard">
        <p slot="title">
          公告
        </p>
        <ul>
          <li v-for="item in bulletins" :key="item.Id" @click="show(item)" class="blist">
            <Icon type="information-circled" style="color: red"></Icon>
            &nbsp&nbsp&nbsp&nbsp{{item.Title}} {{item.Utime.slice(0,10)}}
          </li>
        </ul>
      </Card>
      </Col>
      <Col :span="12">
      <Card class="hcard">
        <p slot="title">
          观看历史
        </p>
        <Timeline class="hisLine" pending>
          <Timeline-item v-for="item in getHistorys" :key="item.Id">
            <p class="time">{{item.Ctime.slice(0,10)}}</p>
            <p class="content">{{item.VideoName}}&nbsp&nbsp观看时长:{{item.LookLong}}秒</p>
          </Timeline-item>
          <Timeline-item>
            <router-link to="/history">查看更多</router-link>
          </Timeline-item>
        </Timeline>
      </Card>
      </Col>
    </Row>
    <Row style="background:#eee;padding:20px;" v-if="role.Type<2">
      <Col :span="12">
      <Card>
        <chart :options="liveOptions"></chart>
      </Card>
      </Col>
      <Col :span="12">
      <Card>
        <chart :options="videoOptions"></chart>
      </Card>
      </Col>

    </Row>
    <Modal
      title="公告"
      width="900"
      v-model="showModel">
      <div v-html="bulletin.Content"></div>
    </Modal>

  </div>
</template>

<script>
  import echarts from 'echarts'
  import {CPT_ROOT,V_ROOT} from '../config/config'
  import api from '../api'
  import {mapActions, mapState, mapMutations} from 'vuex'
  export default{
    data (){
      return {
        liveOptions: {
          title: {text: '直播统计'},
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            axisTick: {
              show: false
            },
            data: [],
            axisLabel: {interval: 0}
          },
//          grid: {
//            left: '3%',
//            right: '4%',
//            bottom: '3%',
//            containLabel: true
//          },
          yAxis: {
            axisTick: {
              show: false
            },
          },
          legend: {
//            data: ['2011年', '2012年','2013年']
          },
          series: [
            {
              name: '观看次数',
              type: 'bar',
              data: []
            },
            {
              name: '观看时长',
              type: 'bar',
              data: []
            }]
        },
        videoOptions: {
          title: {text: '视频统计'},
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            axisTick: {
              show: false
            },
            data: [],
            axisLabel: {interval: 0}
          },
//          grid: {
//            left: '3%',
//            right: '4%',
//            bottom: '3%',
//            containLabel: true
//          },
          yAxis: {
            axisTick: {
              show: false
            },
          },
          legend: {
//            data: ['2011年', '2012年','2013年']
          },
          series: [
            {
              name: '观看次数',
              type: 'bar',
              data: []
            },
            {
              name: '观看时长',
              type: 'bar',
              data: []
            }]
        },
        value: 0,
        bulletins: [],
        showModel: false,
        bulletin: {},
        watchHistory: [],
      }
    },
    computed: {
      ...mapState(['isLogin', 'userprof', 'org', 'userInfo', 'dept', 'role']),
      getHistorys(){
          if(this.watchHistory){
              return this.watchHistory.slice(0,8)
          }else{
              return []
          }
      },
      imgUrl(){
        return V_ROOT + '/' + this.userprof.Photo
      }
    },
    methods: {
      ...mapMutations(['SET_MSG']),
      welcom(){
        if (this.isLogin) {
          this.$Notice.success({
            top: 100,
            title: '欢迎' + this.userprof.Title + '登陆系统',
            desc: '祝您有美好的一天！'
          });
        }
      },
      getallLive (){
        this.spinShow = true
        api.StatisticsLive().then(response => {
          if (response.data.code === 0) {
            this.dataAll = response.data.Data
            for (let v in this.dataAll) {
              this.liveOptions.xAxis.data.push(this.dataAll[v].name)
              this.liveOptions.series[0].data.push(this.dataAll[v].clicks)
              this.liveOptions.series[1].data.push(this.dataAll[v].looklong)
            }
            this.liveOptions.legend.data = ['观看次数', '观看时长']
          } else {
            this.$Message.error(this.msg)
          }
        })
        setTimeout(() => {
          this.spinShow = false;
        }, 300);
      },
      getallVidoe (){
        this.spinShow = true
        api.StatisticsVideo().then(response => {
          if (response.data.code === 0) {
            this.dataAll = response.data.Data
            for (let v in this.dataAll) {
              console.log(this.dataAll[v].name)
              this.videoOptions.xAxis.data.push(this.dataAll[v].name)
              this.videoOptions.series[0].data.push(this.dataAll[v].clicks)
              this.videoOptions.series[1].data.push(this.dataAll[v].looklong)
            }
            this.videoOptions.legend.data = ['观看次数', '观看时长']
          } else {
            this.$Message.error(this.msg)
          }
        })
        setTimeout(() => {
          this.spinShow = false;
        }, 300);
      },
      getBulletin(){
        this.spinShow = true
        api.getMyBulletin().then(response => {
          if (response.data.code === 0) {
            this.bulletins = response.data.Data
          } else {
            this.$Message.error(this.msg)
          }
        })
        setTimeout(() => {
          this.spinShow = false;
        }, 300);
      },
      getHistory (){
        this.spinShow = true
        api.GetWatchHistory().then(response => {
          if (response.data.code === 0) {
            this.watchHistory = response.data.Data
          }
        })
      },
      show(data){
        this.bulletin = data
        this.showModel = true
      }
    },
    mounted: function () {
      this.getallLive()
      this.getallVidoe()
      this.getBulletin()
      this.getHistory()
      setTimeout(() => {
        this.welcom()
      }, 1000);

    }

  }
</script>
